<template>
  <el-tree-select
    v-model="model"
    :data="orgList"
    value-key="id"
    check-strictly
    default-expand-all
    :render-after-expand="false"
    :props="{ label: 'name', children: 'children' }"
    style="width: 100%"
    :clearable="clearable"
    :placeholder="placeholder"
    :disabled="disabled" />
</template>

<script setup lang="ts" name="MaOrgSelect">
import { onMounted, ref } from 'vue'
import { useOrgListApi, useOrgList2Api } from '@/api/sys/orgs'
import { ElTreeSelect } from 'element-plus'

const props = defineProps({
  clearable: {
    type: Boolean,
    required: false,
    default: () => true
  },
  disabled: {
    type: Boolean,
    required: false,
    default: () => false
  },
  placeholder: {
    type: String,
    required: false,
    default: () => ''
  },
  authority: {
    type: Boolean,
    default: false
  }
})

const model = defineModel<number | string>()
const orgList = ref([])

// 获取机构列表
const getOrgList = async () => {
  const res = await useOrgListApi()
  orgList.value = res.data
}

const getOrgList2 = async () => {
  const res = await useOrgList2Api()
  orgList.value = res.data
}

onMounted(() => {
  if (props.authority) {
    getOrgList2()
  } else {
    getOrgList()
  }
})
</script>
